<template>
	<el-container class="design">
		<el-header class="design-header" height="30px">
			<BarTop></BarTop>
		</el-header>
		<el-container class="design-body">
			<el-aside width="48px" class="body-left">
				<el-scrollbar height="100%">
					<BarLeft></BarLeft>
				</el-scrollbar>
			</el-aside>
			<el-main class="body-center">
				<div class="design-wrapper">
					<div
						class="top-ruler"
						:style="{ left: -(scrollLeft - 20) + 'px' }"
					></div>
					<div
						class="right-ruler"
						:style="{ top: -(scrollTop - 20) + 'px' }"
					></div>
					<div class="design-box">
						<el-scrollbar
							:height="height - 50 + 'px'"
							@scroll="scroll"
						>
							<div class="design-canvas"></div>
						</el-scrollbar>
					</div>
				</div>
			</el-main>
			<el-aside width="340px" class="body-right">
				<div :style="{ height: (height - 30) / 2 + 'px' }">
					<CollocationLayer></CollocationLayer>
				</div>
				<div :style="{ height: (height - 30) / 2 + 'px' }">
					<CollocationIndex></CollocationIndex>
				</div>
			</el-aside>
		</el-container>
	</el-container>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, onUnmounted } from "vue";
import BarTop from "./bar/Top.vue";
import BarLeft from "./bar/Left.vue";
import CollocationIndex from "./collocation/Index.vue";
import CollocationLayer from "./collocation/Layer.vue";

export default defineComponent({
	components: {
		BarTop,
		BarLeft,
		CollocationIndex,
		CollocationLayer,
	},
	setup(props: any, context: any) {
		// reactive 数据双向绑定
		const state = reactive({
			height: document.documentElement.clientHeight,
			scrollLeft: 0,
			scrollTop: 0,
		});
		// 方法
		const methods = {
			scroll(e) {
				state.scrollLeft = e.scrollLeft;
				state.scrollTop = e.scrollTop;
			},
		};
		// 页面加载完成
		onMounted(() => {
			window.onresize = () => {
				return (() => {
					state.height = document.documentElement.clientHeight;
				})();
			};
		});
		// 页面销毁完成
		onUnmounted(() => {});

		return {
			// toRefs转换为响应式数据
			...toRefs(state),
			...methods,
		};
	},
});
</script>

<style lang="less" scoped>
.design {
	height: 100%;
	background-color: #1e1e1e;
	color: #fff;
}
.design-header {
	background-color: #323232;
}
.body-left {
	background-color: #333;
}
.body-center {
	position: relative;
	padding: 0;
	.design-wrapper {
		display: flex;
		flex: 1;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 20px 0 0 20px;
		overflow: hidden;
		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			display: block;
			width: 20px;
			height: 20px;
			background-color: #181b24;
		}
		.top-ruler {
			position: absolute;
			left: 20px;
			top: 0;
			width: 10000px;
			height: 20px;
			background: #181b24 url(../../assets/img/ruler_top.png) repeat-x;
		}
		.right-ruler {
			position: absolute;
			left: 0;
			top: 20px;
			width: 20px;
			height: 10000px;
			background: #181b24 url(../../assets/img/ruler_left.png) repeat-y;
			overflow: hidden;
		}
		.design-box {
			width: 100%;
			height: 100%;
			.design-canvas {
				width: 10000px;
				height: 10000px;
				background: url(../../assets/svg/grid.svg);
			}
		}
	}
}
.body-right {
	background-color: #252526;
}
</style>